<template>
	<view class="my_studio_box">
		<view class="container_box">
			<view>
				<!--			<view :style="{ height: currentPages != 1 ? '0' : 'auto', overflow: 'hidden' }">-->
				<orderAndService v-show="currentPages == 1" ref="orderAndServiceRef"></orderAndService>
			</view>
			<view :style="{ height: currentPages != 2 ? '0' : 'auto', overflow: 'hidden' }">
				<businessSchool v-show="currentPages == 2" ref="businessSchoolRef"></businessSchool>
			</view>
			<view :style="{ height: currentPages != 3 ? '0' : 'auto', overflow: 'hidden' }">
				<studioPage v-show="currentPages == 3" ref="studioRef" @refresh="onTabbarTap"></studioPage>
			</view>
			<view :style="{ height: currentPages != 4 ? '0' : 'auto', overflow: 'hidden' }">
				<chatList v-show="currentPages == 4" ref="chatRef"></chatList>
			</view>
			<view :style="{ height: currentPages != 5 ? '0' : 'auto', overflow: 'hidden' }">
				<shoppingMall v-show="currentPages == 5" ref="shoppingMallRef"></shoppingMall>
			</view>
		</view>
		<!-- status  状态 0-提交申请 1-初审通过 2-初审拒绝 3-复审通过 4-复审拒绝 5-已缴纳 -->
		<view class="tabbars" v-if="identity == '0' || identity == '1'">
			<view v-for="item in tabBarData" class="tabbars-item">
				<view @click="onTabbarTap(item)">
					<uni-badge
						class="uni-badge-left-margin"
						:text="item.label == '消息' ? messagePoint : 0"
						absolute="rightTop"
						:offset="[-2, -2]"
						size="small"
						:customStyle="{ background: '#6363FF' }">
						<image class="image" :src="currentPages == item.id ? item.iconSel : item.icon" mode=""></image>
						<view :class="[currentPages == item.id ? 'sel' : 'no-sel']">{{ item.label }}</view>
					</uni-badge>
				</view>
			</view>
		</view>
	</view>
	<versionUpdate ref="versionUpdateRef"></versionUpdate>
</template>

<script setup lang="ts">
import { reactive, ref, watch, onMounted } from "vue";
import api from "@/api/index";
import { onPullDownRefresh, onReachBottom, onShow, onLoad, onHide, onBackPress } from "@dcloudio/uni-app";
import receptionHall from "../components/receptionHall/index.vue";
import serviceHall from "../components/serviceHall/index.vue";
import businessSchool from "../components/businessSchool/index.vue";
import orderAndService from "../components/orderAndService/index.vue";

import studioPage from "../components/studio/index.vue";
import shoppingMall from "../components/shoppingMall/index.vue";
import { useStudioStoreToRefs } from "@/store/useStudioStore";
import { updateUserInfo, loginStatus } from "@/hooks/useLogin";
import { useImStoreToRefs } from "@/store/useImStore";
import { useConfigStore } from "@/store/useConfigStore";

const versionUpdateRef = ref();
onMounted(() => {
	versionUpdateRef.value && versionUpdateRef.value.check();
});
onLoad((params) => {
	if (!loginStatus()) {
		uni.reLaunch({
			url: "/pages/login/index"
		});
		return;
	}
	if (params.currentPages == 3) {
		//3  修改服务价格返回工作台
		setTimeout(() => {
			onTabbarTap({
				id: Number(params.currentPages)
			});
		}, 500);
	} else if (params.currentPages == 2) {
		//2  商学院
		setTimeout(() => {
			onTabbarTap({
				orderType: Number(params.orderType),
				status: -1,
				id: Number(params.currentPages)
			});
		}, 500);
	} else if (params.currentPages == 1) {
		//1接单&服务
		setTimeout(() => {
			onTabbarTap({
				type: params.type,
				id: Number(params.currentPages)
			});
		}, 500);
	} else if (params.currentPages == 5) {
		//5
		setTimeout(() => {
			onTabbarTap({
				id: Number(params.currentPages)
			});
		}, 500);
	} else if (params.currentPages == 4) {
		//4 消息
		setTimeout(() => {
			onTabbarTap({
				id: Number(params.currentPages)
			});
		}, 500);
	}
});
const showCalendar = ref(false);
const { setAppConfig } = useConfigStore();
const { messagePoint } = useImStoreToRefs();
let { studio, identity, studioBalance, applyStudioRecord } = useStudioStoreToRefs();

let currentPages = ref(3);
let tabBarData = reactive([
	{
		label: "我的店铺",
		id: 5,
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-109.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-110.png`,
		point: 0
	},
	{
		label: "接单&服务",
		id: 1,
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-155.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-156.png`,
		point: 0,
		type: 8
	},
	{
		label: "商学院",
		id: 2,
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-143.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-144.png`,
		point: 0,
		status: "",
		orderType: ""
	},
	{
		label: "消息",
		id: 4,
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-117.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-118.png`,
		point: 8
	},
	{
		label: "我的",
		id: 3,
		icon: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-115.png`,
		iconSel: `https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-116.png`,
		point: 0
	}
]);
let studioRef = ref();
let chatRef = ref();
let shoppingMallRef = ref();
let businessSchoolRef = ref();
let receptionHallRef = ref();
let serviceHallRef = ref();
let orderAndServiceRef = ref();
watch(
	() => currentPages.value,
	(newVal, oldVal) => {
		if (newVal == 1) {
			uni.setNavigationBarTitle({
				title: "接单&服务"
			});
		} else if (newVal == 2) {
			uni.setNavigationBarTitle({
				title: "商学院"
			});
		} else if (newVal == 3) {
			uni.setNavigationBarTitle({
				title: "我的"
			});
		} else if (newVal == 4) {
			uni.setNavigationBarTitle({
				title: "消息中心"
			});
		} else if (newVal == 5) {
			uni.setNavigationBarTitle({
				title: "我的店铺"
			});
		}
	},
	{ immediate: true }
);
const onTabbarTap = (item) => {
	showCalendar.value = false;
	currentPages.value = item.id;
	updateUserInfo();
	if (currentPages.value == 4) {
		chatRef.value.getUserList();
	} else if (currentPages.value == 3) {
		studioRef.value && studioRef.value.onDataInit();
	} else if (currentPages.value == 2) {
		businessSchoolRef.value && businessSchoolRef.value.onDataInit();
	} else if (currentPages.value == 1) {
		if (identity.value === 0) {
			tabBarData.forEach((item) => {
				if (item.id === 1) {
					item.type = 1;
				}
			});
		}
		orderAndServiceRef.value && orderAndServiceRef.value.getOrderTab();
		orderAndServiceRef.value && orderAndServiceRef.value.onDataInit({ type: item.type });
		orderAndServiceRef.value && orderAndServiceRef.value.getHallInfo();
		orderAndServiceRef.value && orderAndServiceRef.value.getOtherInfo();
	} else if (currentPages.value == 5) {
		shoppingMallRef.value && shoppingMallRef.value.init();
	}
};
// 获取工作室信息
const getStudioInfo = async () => {
	const { data } = await api({
		method: "get",
		url: `/mall/studio/myStudio`
	});
	applyStudioRecord.value = data.applyStudioRecord;
	studio.value = data.studio;
	identity.value = data.identity;
	studioBalance.value = data.studioBalance;
};
const calendarShowFlag = ref();
const styleChange = (val) => {
	console.log(val);
	calendarShowFlag.value = val;
};

// 页面下拉刷新
onPullDownRefresh(async () => {
	if (currentPages.value == 1) {
		orderAndServiceRef.value && orderAndServiceRef.value.onRefresh();
	} else if (currentPages.value == 2) {
		businessSchoolRef.value && businessSchoolRef.value.onDataInit();
	} else if (currentPages.value == 3) {
		studioRef.value && studioRef.value.onDataInit();
	} else if (currentPages.value == 5) {
		serviceHallRef.value && serviceHallRef.value.onRefresh();
	} else {
		uni.stopPullDownRefresh();
	}
});
// 触底
onReachBottom(() => {
	if (currentPages.value == 1) {
		orderAndServiceRef.value.onLoadMore();
	} else if (currentPages.value == 2) {
		businessSchoolRef.value.onLoadMore();
	} else if (currentPages.value == 5) {
		serviceHallRef.value.onLoadMore();
	}
});
onHide(() => {
	showCalendar.value = false;
});
onShow(async () => {
	updateUserInfo();
	await getStudioInfo();
	if (currentPages.value == 3) {
		studioRef.value && studioRef.value.onDataInit();
	}
	if (currentPages.value == 2) {
		console.log(businessSchoolRef.value);
		businessSchoolRef.value && businessSchoolRef.value.onDataInit();
	}
	if (currentPages.value == 1) {
		setTimeout(() => {
			if (identity.value === 0) {
				tabBarData.forEach((item) => {
					if (item.id === 1) {
						item.type = 1;
						console.log(item, "tabBarData");
					}
				});
			}
			orderAndServiceRef.value && orderAndServiceRef.value.getOrderTab();
			orderAndServiceRef.value && orderAndServiceRef.value.onDataInit();
			orderAndServiceRef.value && orderAndServiceRef.value.getHallInfo();
			orderAndServiceRef.value && orderAndServiceRef.value.getOtherInfo();
		});
	}
	if (currentPages.value == 4) {
		chatRef.value.getUserList();
	}
	if (currentPages.value == 5) {
		serviceHallRef.value && serviceHallRef.value.onDataInit();
		showCalendar.value = true;
	}
	//更新配置接口
	setAppConfig();
});
</script>

<style lang="scss" scoped>
::v-deep .serviceHallIndex {
	.uni-calendar__content {
		border-radius: 24rpx;
	}

	// .uni-calendar__box{
	//  height: 186rpx;
	//  overflow: hidden;
	// }

	.item--uni-calendar-item--checked {
		background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
		border-radius: 50%;
	}

	.uni-calendar-item--checked {
		background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
		border-radius: 50%;
	}

	.uni-calendar-item__weeks-box-circle {
		display: none;
	}

	.uni-calendar-item--isDay {
		background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
		border-radius: 50%;
		color: #ffffff !important;
		font-size: 20rpx;
	}

	.uni-calendar-item--isDay-text {
		color: #1b2120;
	}
}

// ::v-deep .showCalendar{
//     .uni-calendar__box{
//     	height: auto;
//     }
// }
// ::v-deep .closeCalendar{
// 	.uni-calendar__box{
// 	  height: 186rpx;
// 	  overflow: hidden;
// 	}
// }
.tabbars {
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	border-top: 1rpx solid #e4e6e6;
	border-bottom: calc(var(--safe-area-bottom) + 12rpx) solid #fff;
	line-height: 1.2;

	.tabbars-item {
		flex: 1;
		text-align: center;
		font-size: 24rpx;

		.image {
			width: 48rpx;
			height: 48rpx;
		}

		.sel {
			color: var(--color-primary);
		}

		.no-sel {
			color: #7c807f;
		}
	}
}
</style>
